<template>
  <div class="train">
    <exchange-station v-model="station" :stationList="stationList" :ticketType="0"></exchange-station>
    <p class="date" @click.stop="showCalendar = true">{{departureDate}}</p>
    <div class="check">
      <check-icon :value.sync="isGD">高铁动车</check-icon>
      <!-- <check-icon :value.sync="isStudent">学生票</check-icon> -->
    </div>
    <x-button type="primary" class="submit" @click.native="submitQuery">查询</x-button>

    <transition name="fade">
      <div class="calender-wrapper" @click="showCalendar = false" v-show="showCalendar">
        <div class="calendar-dropdown" @click.stop="() => {}">
          <calendar :zero="calendarOpt.zero" :lunar="calendarOpt.lunar" :value="calendarOpt.value" :begin="calendarOpt.begin" :end="calendarOpt.end" @select="calendarOpt.select"></calendar>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import ExchangeStation from '@/components/exchange-station/exchange-station'
import Calendar from '@/components/calendar/calendar.vue'
import { CheckIcon, XButton } from 'vux'
import axios from '@/api/axiosApi'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      station: [{name: '贵阳', stationCode: 'GIW'}, {name: '凯里', stationCode: 'KLW'}],
      isGD: false,
      isStudent: false,
      showCalendar: false,
      departureDate: this.moment().format('M月D日 dddd'),
      calendarOpt: {
        zero: true,
        value: this.moment().toArray().slice(0, 3), // 默认日期
        lunar: true, // 显示农历
        select: (value) => {
          if (this.showCalendar === false) return
          this.showCalendar = false
          this.calendarOpt.value = value
          this.departureDate = this.moment(value).format('M月D日 dddd')
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      stationList: 'trainStationList'
    })
  },
  created() {
    if (this.stationList.length === 0) {
      this._getTrainStationList('', 3000)
    }
  },
  components: {
    ExchangeStation, Calendar, CheckIcon, XButton
  },
  methods: {
    _getTrainStationList (keyWords, pageSize = 10) {
      axios.get(this, '/v1/railwayStationCode', {
        keyWords,
        pageSize,
        pageNum: 1
      }, (data) => {
        // 数据按照索引处理
        this.$store.commit('SET_TRAIN_STATION_LIST', data)
      })
    },
    submitQuery () {
      this.$store.commit('SET_TRAIN_QUERY', {
        startStationName: this.station[0].name,
        startStationCode: this.station[0].stationCode,
        endStationName: this.station[1].name,
        endStationCode: this.station[1].stationCode,
        departureDate: this.moment(this.calendarOpt.value).format('YYYY-MM-DD'),
        isGD: this.isGD,
        isStudent: this.isStudent
      })
      this.$router.push('/trainTicket')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.train
  background-color #fff
  padding 15px
  .date
    font-size 24px
    padding 9px 0
    border-bottom 1px solid $color-border
  .check
    font-size $font-size-title
    padding 12px 0
    display flex
    justify-content space-between
    color #333
  .submit
    font-size 21px
    background $color-theme
    margin-top 20px
.fade-enter-active, .fade-leave-active
  animation-duration .5s
.calender-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 102
.calendar-dropdown
  position fixed
  left 50vw
  top 134px
  z-index 103
  transform translateX(-50%)
  padding 20px
  border 1px solid #eee
  border-radius 5px
  filter drop-shadow(2px 2px 12px #bfbfbf)
  background #fff
  &:before
    content ''
    display block
    position absolute
    top -16px
    left 20px
    width 0
    height 0
    border-left 15px solid transparent
    border-right 15px solid transparent
    border-bottom 16px solid #eee
  &:after
    content ''
    display block
    position absolute
    top -15px
    left 20px
    width 0
    height 0
    border-left 15px solid transparent
    border-right 15px solid transparent
    border-bottom 16px solid #fff
</style>
